<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-20 14:08:37
 * @LastEditTime: 2019-10-30 15:01:40
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  添加列表
      </div>
      <div class="container_body">
        <el-form
          ref="addform"
          :model="addform"
          :rules="addRules"
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item
            label="渠道名称"
            prop="name"
          >
            <el-input
              ref="name"
              v-model="addform.name"
              placeholder="渠道名称"
              name="name"
            />
          </el-form-item>
          <el-form-item
            label="渠道别名"
            prop="alias"
          >
            <el-input
              ref="alias"
              v-model="addform.alias"
              placeholder="请填写英文别名"
              name="alias"
            />
          </el-form-item>
          <el-form-item
            label="选择平台"
            prop="platform"
          >
            <el-checkbox-group
              v-model="checkboxGroup"
              name="platform"
              size="small"
            >
              <el-checkbox value="Android" name="platform" label="Android" border />
              <el-checkbox value="iOS" name="platform" label="iOS" border />
            </el-checkbox-group>
          </el-form-item>
          <!-- <el-form-item
            label="渠道代码"
            prop="code"
          >
            <el-input ref="code" v-model="addform.code" placeholder="渠道代码" />
          </el-form-item>
          <el-form-item
            label="最高版本"
            prop="max_verify"
          >
            <el-input ref="max_verify" v-model="addform.max_verify" placeholder="最高版本" />
          </el-form-item>
          <el-form-item
            label="渠道sdk版本"
            prop="sdk_verify"
          >
            <el-input v-model="addform.sdk_verify" placeholder="渠道sdk版本，多个请用','号隔开" />
          </el-form-item> -->
          <el-form-item label="上传角标" prop="label">
            <el-upload
              class="upload-demo"
              :action="upload_url"
              :headers="headers"
              :on-remove="handleRemove"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :file-list="label_list"
              :limit="uploadLimit"
              :on-change="handleBefore"
              :on-exceed="handleExeed"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传角标</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="使用状态" prop="state">
            <el-select v-model="addform.state" placeholder="请选择状态">
              <el-option label="开启" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="btn" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import config from '../../config/config'
export default {
  data() {
    // const stateValidator = (rule, value, callback) => {
    //   if (value === undefined) {
    //     callback(new Error('请选择状态！'))
    //   }
    //   callback()
    // }
    const labeValidate = (rule, value, callback) => {
      if (this.addform.label === '' || this.addform.label === undefined || this.addform.label === null) {
        callback(new Error('请上传一张角标！'))
      }
      callback()
    }
    const platformValidator = (rule, value, callback) => {
      if (this.checkboxGroup.length === 0) {
        callback(new Error('请至少选址一个平台！'))
      }
      callback()
    }
    return {
      addform: {
        domains: [{
          value: ''
        }]
      },
      addRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写渠道名称' }],
        alias: [{ required: true, trigger: 'blur', message: '请填写渠道别名' }],
        // code: [{ required: true, trigger: 'blur', message: '请填写渠道代码' }],
        // max_verify: [{ required: true, trigger: 'blur', message: '请填写最高版本' }],
        // sdk_verify: [{ required: true, trigger: 'blur', message: '请填写渠道sdk版本' }],
        label: [{ required: true, validator: labeValidate }],
        // state: [{ required: true, validator: stateValidator }],
        platform: [{ required: true, validator: platformValidator }]
      },
      label_list: [],
      img_path: config.BASE_IMG,
      checkboxGroup: [],
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('_token')
      },
      upload_url: config.BASE_URL + 'channel/upload',
      uploadLimit: 1
    }
  },
  created() {
    var id = this.$route.query.id
    if (id) {
      const data = {
        id: id
      }
      this.$api.get_channel(data).then(res => {
        console.log(res)
        this.addform = res.data
        this.checkboxGroup = res.data.platform.split(',')
        // this.addform.state = res.data.state.toString()
        this.label_list.push({
          'uid': res.data.id,
          'path': this.img_path + res.data.label,
          'url': this.img_path + res.data.label
        })
      })
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.addform.label = ''
    },
    handlePreview(res) {
      console.log(res)
    },
    handleSuccess(res, fileList) {
      if (res.access_token) {
        localStorage.setItem('_token', res.access_token)
      }
      console.log(this.label_list)
      this.addform.label = res.path
    },
    handleExeed(res) {
      this.$notify.error({
        title: '错误',
        message: '最多只能上传一张图片！'
      })
    },
    handleBefore(file, fileList) {
      this.headers = {
        'Authorization': 'Bearer ' + localStorage.getItem('_token')
      }
    },
    submitForm() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          this.addform.platform = this.checkboxGroup.join(',')
          this.$api.addChannel(this.addform).then(res => {
            this.$notify.success({
              message: '添加成功！'
            })
            this.$router.push('/channel/index')
          }).catch(() => {
            this.$notify.error({
              title: '',
              message: '网络错误'
            })
          })
        }
      })
    },
    resetForm() {
      this.$refs.addform.resetFields()
      this.addform = {
        domains: [{
          value: ''
        }]
      }
      this.label_list = []
      this.checkboxGroup = []
    }
  }
}
</script>
<style scoped lang="">

</style>
